<template>
  <van-action-bar class="position-fixed bottom-bar">
    <van-action-bar-button
      type="default"
      text="分享给用户使用"
      color="#E8F3FF"
      @click="showShare = true"
      class="bar-btn"
    />
  </van-action-bar>
  <van-share-sheet
    class="sheet-content share-panel-round"
    v-model:show="showShare"
    title="选择要分享的匹配工具"
    :options="options"
    @select="onSelect"
  />
</template>

<script lang="ts" setup>
const showShare = ref(false)
const options = [
  { name: '工薪匹配', icon: 'static/images/matchUser/shareBg1.png' },
  { name: '企业匹配', icon: 'static/images/matchUser/shareBg2.png' },
  { name: '抵押匹配', icon: 'static/images/matchUser/shareBg3.png' },
]
const onSelect = (option) => {
  showShare.value = false
}
</script>

<style>
.bottom-bar {
  height: 80px;
  line-height: 80px;
  .bar-btn {
    height: 48px;
    margin: 16px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #165dff !important;
    border-radius: 6px;
  }
}
.sheet-content {
  .van-share-sheet__header {
    padding: 9px 16px;
  }
  .van-share-sheet__title {
    margin: 0;
    font-family: 'Alibaba PuHuiTi, Alibaba PuHuiTi';
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    color: #1d2129;
    text-align: left;
  }
  .van-share-sheet__option {
    position: relative;
    flex: 1;
  }
  .van-share-sheet__icon,
  .van-share-sheet__image-icon {
    width: 99px;
    height: 99px;
    margin: 0 11px;
  }
  .van-share-sheet__name {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #000000;
    text-wrap: nowrap;
    transform: translate(-50%, -50%);
  }
}
</style>
